<template>
    <div class="plan">
      <div class="plan-title">「意志力鼓励计划」进度</div>
      <div class="plan-table">
         <div class="calendar-day clearfloat">
            <div class="fl" v-for="(item,dIndex) in willPlan.plan" :key="dIndex">
                <form @submit="formSubmit($event,item)" report-submit>
                  <img class="clock" v-if="item.clock_state == 1" src="https://mobuz-mp.cdn.bcebos.com/matter/complete_02@2x.png">
                  <div class="star" v-if="item.all_start">
                    <img v-for="star in 3" :key="star" :src="item.all_start >= star+1? 'https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png' :'https://mobuz-mp.cdn.bcebos.com/matter/star_empty@2x.png'">
                  </div>
                  <button formType="submit" class="form-btn" :class="{finish: item.finish_state == 1,mend: item.finish_state == 2, unfinished: item.finish_state == 3 && item.status,'pink': item.today_tas == 1 , 'green': item.today_tas == 2 }">
                      <span>{{item.section_day}}</span>
                  </button>
                </form>
                <!-- <span  @click.stop="gotoRouter(day)" :class="{finish: day.finish_state == 1,mend: day.finish_state == 2, unfinished: day.finish_state == 3}">{{day.day > 0 ? day.day : ''}}</span> -->
            </div>
        </div>
      </div>
      <div class="rule">
        <div class="rule-title">规则</div>
        <div class="rule-item">金奖：当日课程获得三星且当日打卡，累计{{willPlan.gold_num || 15}}天以上；</div>
        <div class="rule-item">奖品：{{willPlan.gold_desc}}</div>
        <div class="rule-item">银奖：当日课程获得三星且当日打卡，累计{{willPlan.silver_num || 10}}天以上；</div>
        <div class="rule-item">奖品：{{willPlan.silver_desc}}</div>
        <div class="rule-item">打卡操作是在悦器社app中，每天的练习结束之后完成。</div>
      </div>
      <div class="remark">
        <div class="remark-title">注</div>
        <div class="remark-type">
          <div class="type-item">
              <div class="icon">
                <div class="star">
                    <img src="https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png">
                    <img src="https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png">
                    <img src="https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png">
                  </div>
              </div>
              <div class="text">当日星级</div>
          </div>
          <div class="type-item between">
              <div class="icon">
                <div class="star">
                    <img src="https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png">
                    <img src="https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png">
                    <img src="https://mobuz-mp.cdn.bcebos.com/matter/star_fill@2x.png">
                  </div>
              </div>
              <div class="text">非当日星级</div>
          </div>
          <div class="type-item">
              <div class="icon">
                <img src="https://mobuz-mp.cdn.bcebos.com/matter/complete_02@2x.png">
              </div>
              <div class="text">当日打卡</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {saveStudentFormId,obtainCourseWillPlan ,statAwardsCase} from '@/config/api'
import {showMessager} from '@/config/wUtils'
import {} from '@/config/mUtils'

export default {
  components:{
  },
  data () {
    return {
      // 课程卡片数据
      willPlan: {},
       // 课程开始时间
      courseStartTime: 0,
      // 一天的毫秒数
      day_ms:  60 * 60 * 24 * 1000,
      // 进入新界面，防止他重复点击
      astrictClickFlag: false,
    }
  },
  mounted () {
    // this.userInfo = wx.getStorageSync('userInfo');
    // this.batch_id = wx.getStorageSync('batch_id');
    // this.student_id = wx.getStorageSync('student_id');
    // this.courseWillPlan()
  },
  methods: {
    async formSubmit (e,item) {
      // 保存用户点击的formid
      await saveStudentFormId(this.userInfo.openId,e.target.formId).then(res => {});
    },
    async courseWillPlan () {
      wx.showLoading({title: '加载中'})
      let data = await obtainCourseWillPlan(this.batch_id,this.userInfo['unionId']);
      if (data.status === 200) {
        wx.pageScrollTo({
          scrollTop: 0
        });
        this.willPlan = data.data[0];
        console.log(this.willPlan,'课程计划');
      };
       wx.hideLoading();
      wx.stopPullDownRefresh();
    }
  },
  // 下拉刷新
  onPullDownRefresh () {
    this.courseWillPlan()
  },
  // 上拉加载
  onReachBottom () {
  },
  // 切换界面
  onHide () {
  },
  // 滚动界面
  onPageScroll (res) {
  },
  // 页面加载
  onLoad () {
  },
  // 页面显示
  onShow () {
    this.userInfo = wx.getStorageSync('userInfo');
    this.batch_id = wx.getStorageSync('batch_id');
    this.student_id = wx.getStorageSync('student_id');
    let status  = wx.getStorageSync('plan_state');
    let state = wx.getStorageSync('plan_table_state');
    if (state == 1 || !this.willPlan ) {
      this.courseWillPlan();
      let state = wx.setStorageSync('plan_table_state',0);
    }
  }
}
</script>
<style lang="less" scoped>
.clearfloat {
    zoom: 1;
}
.clearfloat:after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    visibility: hidden;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.plan {
  padding: 0 32rpx;
  .plan-title {
    padding: 30rpx 0;
    line-height: 1;
    font-family: PingFangSC-Medium;
    font-size: 36rpx;
    color: #333333;
    letter-spacing: 0.73rpx;
  }
  .plan-table {
    background: #FFFFFF;
    box-shadow: 0 0 12px 2px rgba(223,223,223,0.30);
    border-radius: 14px;
    .calendar-day {
      padding: 22rpx 33rpx;
      font-family: PingFangSC-Light;
      font-size: 0;
      color: #666666;
      text-align: center;
      > div {
        display: inline-block;
        margin-top: 12rpx;
        width: 68rpx;
        height: 68rpx;
        margin-right: 24rpx;
        text-align: center;
        display: flex;
        align-items: center;
        &:nth-child(7n) {
          margin-right: 0;
        }
        span {
          // align-items: center;
          // vertical-align:middle;
          display: block;
          margin: 0 auto;
          width: 56rpx;
          height: 56rpx;
          line-height: 56rpx;
          font-size: 28rpx;
          border-radius: 50%;
        }
        &.stage {
          border-radius: 50%;
          border: 1rpx solid #bdbdbd;
          box-sizing: border-box;
        }
        form {
          margin: 0 auto;
          position: relative;
          .clock {
            display: block;
            position: absolute;
            right: -3rpx;
            top: -3rpx;
            width: 24rpx;
            height: 24rpx;
            overflow: hidden;
            border-radius: 50%;
            z-index: 1;
          }
          .star {
            position: absolute;
            bottom: 4rpx;
            width: 100%;
            font-size: 0;
            z-index: 1;
            > img {
              display: inline-block;
              vertical-align: bottom;
              width: 10rpx;
              height: 10rpx;
              &:nth-child(1), 
              &:nth-child(3) {
                padding-bottom: 4rpx;
              }
              &:nth-child(2) {
                margin: 0 4rpx;
              }
            }
          }
          .form-btn {
              border:none;
              text-align:left;
              padding:0;
              margin:0;
              background-color: transparent;
              border-radius: 50%;
              // &.finish {
              //     color: #ffffff;
              //     background-color: #c1e993;
              // }
              // &.mend {
              //     color: #ffffff;
              //     background-color: #fbf19e;
              // }
              // &.unfinished {
              //     color: #ffffff;
              //     background-color: #e0e0e0;
              // }
              &.green {
                color: #333333;
                background: #B9E981;
                box-shadow: 0 3px 20px 1px rgba(193,233,147,0.60);
              }
              &.pink {
                color: #333333;
                background: #FAD0D0;
                box-shadow: 0 3px 20px 1px rgba(237,197,197,0.60);
              }
              &::after {
                  border: none;
              }
              > span {
                  text-align: center;
                  // &.finish {
                  //     color: #ffffff;
                  //     background-color: #c1e993;
                  // }
                  // &.mend {
                  //     color: #ffffff;
                  //     background-color: #fbf19e;
                  // }
                  // &.unfinished {
                  //     color: #ffffff;
                  //     background-color: #e0e0e0;
                  // }
              }
          }
        }
      }
    }
  }
  .rule {
    .rule-title {
      padding: 10rpx 0;
      line-height: 1;
      font-family: PingFangSC-Regular;
      font-size: 32rpx;
      color: #333333;
    }
    .rule-item {
      font-family: PingFangSC-Regular;
      font-size: 26rpx;
      color: #666666;
      letter-spacing: 0.5rpx;
      line-height: 50rpx;
    }
  }
  .remark {
    margin-top: 22rpx;
    position: relative;
    text-align: center;
    .remark-title {
      position: absolute;
      top: 0;
      left: 0;
      line-height: 1;
      font-family: PingFangSC-Regular;
      font-size: 32rpx;
      color: #333333;
    }
    .remark-type {
      margin: 0 auto;
      width: 515rpx;
      height: 120rpx;
      background: #FAFAFA;
      border-radius: 8rpx;
      font-size: 0;
      .type-item {
        display: inline-block;
        text-align: center;
        vertical-align: top;
        &.between {
          margin: 0 74.5rpx;
        }
        &:nth-child(1) .icon{
          background-color: #B9E981;
          box-shadow: 0 3rpx 20rpx 1px rgba(193,233,147,0.60);
        }
        &:nth-child(2) .icon{
          background-color: #FAD0D0;
          box-shadow: 0 3rpx 20rpx 1px rgba(237,197,197,0.60);
        }
        .icon {
          margin: 20rpx auto 11rpx;
          width: 42rpx;
          height: 42rpx;
          border-radius: 50%;
          position: relative;
          > img {
            width: 42rpx;
            height: 42rpx;
            border-radius: 50%;
            overflow: hidden;
          }
          .star {
            position: absolute;
            width: 100%;
            bottom: 3px;
            > img {
              display: inline-block;
              vertical-align: bottom;
              width: 6rpx;
              height: 6rpx;
              &:nth-child(1), 
              &:nth-child(3) {
                padding-bottom: 3rpx;
              }
              &:nth-child(2) {
                margin: 0 3rpx;
              }
            }
          }
        }
        .text {
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #666666;
          letter-spacing: 0.57rpx;
        }
      }
    }
  }
}
</style>
